<div class="panel panel-default" id="topics_list">
    <div class="panel-heading">
        <h3 class="panel-title">All Topics </h3>

        <!-- <div class="panel-options">
            <a href="#" data-toggle="panel">
                <span class="collapse-icon">–</span>
                <span class="expand-icon">+</span>
            </a>
        </div> -->
    </div>
    <div class="panel-body">

	    <div class="row" style="margin-bottom: 5px;">
            <div class="col-sm-12">
                <form role="form" class="form-inline pull-right" onsubmit="return false;">
                    <div class="form-group">
                        <input type="text" class="form-control" size="25" v-model="topic"
                            placeholder="Topic" id="topic_key" @change="search"/>
                    </div>

                    <div class="form-group">
                        <button type="button" class="btn btn-success btn-single" @click="search">Search</button>
                    </div>

                </form>
           </div>
         </div>
   		<div class="table-responsive" data-pattern="priority-columns"
			data-focus-btn-icon="fa-asterisk" data-sticky-table-header="true"
			data-add-display-all-btn="true" data-add-focus-btn="true">


                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Topic</th>
                            <th>SubTopicCount</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr v-for="topic in topics">
                        <td>{{ topic.topic }}</td>
                        <td> <a href="/#/subscriptions" @click="topic_sub(topic.topic)">{{ topic.count }}</a></td>
                        </tr>
                    </tbody>
                </table>

            </div>
        
        <div class="row">
            <div class="col-sm-6">showing 
                <span>{{ pageInfo.offsetting() }}</span> - 
                <span>{{ pageInfo.endNum() }}</span> of 
                <span>{{ pageInfo.totalNum }}</span> records
            </div>
            <div class="col-sm-6">
                <div class="pull-right" id="pagination">
                <template v-if="pageInfo.currPage <= 1">
                <button type="button" class="btn btn-white disabled previous">Previous</button>
                </template>
                <template v-else>
                <button type="button" class="btn btn-white previous" @click="go(pageInfo.currPage-1)">Previous</button>
                </template>
                <div class="btn-group">
                    <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                        records per page <strong id="page_size">{{ pageInfo.pageSize }}</strong> <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-white" role="menu">
                        <li>
                            <a href="javascript:;" @click="changeSize(100);">100</a>
                        </li>
                        <li>
                            <a href="javascript:;" @click="changeSize(200);">200</a>
                        </li>
                        <li>
                            <a href="javascript:;" @click="changeSize(500);">500</a>
                        </li>
                        <li>
                            <a href="javascript:;" @click="changeSize(1000);">1000</a>
                        </li>
                    </ul>
                </div>
                <template v-if="pageInfo.currPage >= pageInfo.totalPage">
                <button type="button" class="btn btn-white disabled next">Next</button>
                </template>
                <template v-else>
                <button type="button" class="btn btn-white next" @click="go(pageInfo.currPage+1)">Next</button>
                </template>
                </div>
            </div>
        </div>

    </div>
</div>

